{% extends "../main.html" %}

{% block head %}
<script src="/javascript/jquery.elastic.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.5/form/jquery.tools.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/css/dateinput.css"/>
{% endblock %}

{% block breadcrumb %}
<nav>
    <ul id="crumbs">
        <li><a href="/">{{ system_title }}</a></li>
        <li><a href="/questionary">{{ str.questionaries }}</a></li>
        <li id="crumb_title">{{ questionary.name.translate }}</li>
    </ul>
</nav>
{% endblock %}

{% block content %}
<div style="display:table-row;">
    <div id="content">
        {% if questionary.key %}
        <div id="questions_table" class="table">
            <div class="table_row">
                <div class="header_cell">
                </div>
                <div class="header_cell">
                    {{ str.question }}
                </div>
                <div class="header_cell" style="text-align:center;">
                    {{ str.type }}
                </div>
                <div class="header_cell" style="text-align:center;">
                    {{ str.mandatory }}
                </div>
                <div class="header_cell" style="text-align:center;">
                    {{ str.teacher_specific }}
                </div>
                <div class="header_cell">
                </div>
            </div>
            {% for q in questionary.questions|dictsort:"ordinal" %}
            <div id="question_{{ q.key }}" class="table_row sortable" alt="{{ q.key }}">
                <div class="table_cell sort" style="width:30px; height:25px; background: url('/images/sort.png') center center no-repeat;">
                </div>
                <div class="table_cell" style="width:340px;">
                    {{ q.name.translate }}
                </div>
                <div class="table_cell" style="text-align:center; width:70px;">
                    {% ifequal q.type "like" %}{{ str.questiontype_like }}{% endifequal %}
                    {% ifequal q.type "rating" %}{{ str.questiontype_rating }}{% endifequal %}
                    {% ifequal q.type "text" %}{{ str.questiontype_text }}{% endifequal %}
                </div>
                <div class="table_cell" style="text-align:center; width:100px;">
                    {{ q.is_mandatory|yesno:"✓,," }}
                </div>
                <div class="table_cell" style="text-align:center; width:100px;">
                    {{ q.is_teacher_specific|yesno:"✓,," }}
                </div>
                <a href="javascript:void(0);" class="table_cell buttons delete_question" style="width:40px; height:25px; background: url('/images/delete.png') center center no-repeat;" alt="{{ q.key }}">
                </a>
            </div>
            {% endfor %}
            <form id="newform" class="table_row" method="post" action="/questionary/{{ questionary.key }}/question/edit/" >
                <div class="table_cell">
                </div>
                <div class="table_cell">
                    <input type="text" name="name" id="question_name" placeholder="{{ str.question }}" style="width:310px;" />
                </div>
                <div class="table_cell" style="text-align:center;">
                    <select name="type" id="question_type">
                        <option value="like">{{ str.questiontype_like }}</option>
                        <option value="rating">{{ str.questiontype_rating }}</option>
                        <option value="text">{{ str.questiontype_text }}</option>
                    </select>
                </div>
                <div class="table_cell" style="text-align:center;">
                    <input type="checkbox" name="mandatory" id="question_mandatory" />
                </div>
                <div class="table_cell" style="text-align:center;">
                    <input type="checkbox" name="teacher_specific" id="question_teacherspecific" />
                </div>
                <a href="javascript:void(0);" id="save_question_form" class="table_cell buttons" style="width:40px; height:25px; background: url('/images/add.png') center center no-repeat;" alt="{{ q.key }}">
                </a>
            </form>
        </div>
        {% else %}
        <script type="text/javascript">
            $(document).ready(function(){
                $("#name").focus();
            });
        </script>
        {% endif %}
    </div>

    <form id="rightbox" method="post" action="" >
        <label for="name">{{ str.questionary }}</label>
        <input type="text" id="name" name="name" placeholder="{{ str.name }}" value="{{ questionary.name.translate|default:"" }}" required /><br /><br />
        <label for="name">{{ str.start_date }}</label>
        <input type="date" id="start_date" name="start_date" placeholder="{{ str.start_date }}" value="{{ questionary.start_date|default:"" }}" /><br /><br />
        <label for="name">{{ str.end_date }}</label>
        <input type="date" id="end_date" name="end_date" placeholder="{{ str.end_date }}" value="{{ questionary.end_date|default:"" }}" /><br /><br />
        <label for="name">{{ str.description }}</label>
        <textarea name="{{ item.key }}" id="description" name="description" placeholder="{{ str.description }}">{{ questionary.description.translate|default:"" }}</textarea>
        <br /><br />
        <a href="javascript:void(0);" id="save_questionary_form" class="button">{{ str.save }}</a>
        <a href="javascript:void(0);" id="delete_questionary" style="color:red; float:right; font-size:12px; padding-top:10px;">{{ str.delete }}</a>
    </form>
</div>


<script type="text/javascript">
    $(document).ready(function(){

        $('textarea').elastic();


        //SORT
        $( "#questions_table" ).sortable({
            items: '.sortable',
            axis: 'y',
            cursor: 'move',
            handle: '.sort',
            forceHelperSize: true,
            opacity: 0.6,
            update: function(event, ui) {
                var order = $(this).sortable('serialize',{key:'question', attribute:'alt', expression: '(.*)'});
                $.post('/questionary/sort/{{ questionary.key }}', order);
            },
        });

        //DATE FIELDS
        $.tools.dateinput.localize('ee',  {
            months:         '{{ str.list_months }}',
            shortMonths:    '{{ str.list_shortmonths }}',
            days:           '{{ str.list_days }}',
            shortDays:      '{{ str.list_shortdays }}'
        });

        $(':date').dateinput({
            lang: 'ee',
            format: 'dd.mm.yyyy',
            firstDay: 1
        });

        $('#start_date').data('dateinput').change(function() {
	       $('#end_date').data('dateinput').setMin(this.getValue(), true);
        });

        $('#end_date').data('dateinput').change(function() {
	       $('#start_date').data('dateinput').setMax(this.getValue(), true);
        });


        //QUESTIONARY

        $("#save_questionary_form").click(function() {
            $.post('/questionary/{{ questionary.key }}', {
                    name: $("#name").val(),
                    start_date: $("#start_date").val(),
                    end_date: $("#end_date").val(),
                    description: $("#description").val(),
                },
                function(data) {
                    $('#crumb_title').html($("#name").val());
                    if(data) {
                        location.href = '/questionary/' + data;
                    };
                }
            );
        });

        $('#delete_questionary').click(function() {
            if (confirm('{{ str.confirm_delete_questionary }}')) location.href = '/questionary/delete/{{ questionary.key }}';
        });


        //QUESTION
        $("#save_question_form").click(function() {
            $.post('/questionary/question', {
                    questionary: '{{ questionary.key }}',
                    name: $("#question_name").val(),
                    type: $("#question_type").val(),
                    mandatory: $("#question_mandatory:checked").val(),
                    teacher_specific: $("#question_teacherspecific:checked").val(),
                }
                , function(data) {
                    location.href = '/questionary/{{ questionary.key }}';
                });
        });

        $('.delete_question').click(function() {
            key = $(this).attr('alt');
            if (confirm('{{ str.confirm_delete_question }}')) {
                $.get('/questionary/question/delete/' + key, function(data) {
                    $('#question_' + key).hide();
                });
            }
        });

    });

</script>

{% endblock %}